<template>
  <div>
    <form class="form-inline" v-on:submit.prevent="filter()">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="关键字" v-model="keyword">
      </div>
      <!-- <div style="width:10px;height:10px"></div> -->
      <button type="button" class="btn btn-primary" @click="filter()" style="margin-left:10px">查询</button>
    </form>
    <div class="row">
      <div class="col-md-12" style="position:relative;height:480px;margin-top:10px">
        <grid
          :keyName="keyName"
          :items="customers"
          :columns="columns"
          :singleSelect="true"
          :selectedItems="selectedItems"
          :pageable="pageable"
        />
      </div>
    </div>
  </div>
</template>
<script>
import grid from "@/components/grid";

export default {
  name: "CustomerPicker",
  props: {
    selectedItems: Array
  },
  components: { grid },
  data() {
    return {
      keyName: "user_id",
      keyword: "",
      pageable : null,
      customers: [],
      columns: [
        { text: "名称", name: "real_name", width: '180px' },
        { text: "电话", name: "phone_mob", width: '120px' },
        { text: "类型", name: "type", width: '75px' }
      ]
    };
  },
  methods: {
    filter(page) {
      var self = this;

      this.$order.getCustomers(this.keyword, page).then(r => {
        const result = r.data;
        if (result.success) {
          self.customers = result.data.items;
          //console.log("customers: ", this.customers)
          self.pageable = result.data._meta;
          //console.log('pageable: ', self.pageable)
          if(self.pageable) {
            self.pageable.goto = self.filter;
          }
        }
      });
    }
  },
  mounted() {
    this.filter(1);
  }
};
</script>

